<template>
	<div class="comment">
		<!-- 形态1. 简单的展示 -->
		<div class="type1" v-show="!isShow">
			<input type="text" placeholder="写跟帖" @focus="isShow = true" v-model.trim="content" />
			<span class="icon-group" @click="$router.push({ path: `/comment/${article.id}` })">
				<i class="iconfont iconpinglun-"></i>
				<em>102</em>
			</span>
			<!-- 收藏按钮 -->
			<span class="icon-group" @click="starFn">
				<i
					class="iconfont iconshoucang"
					:class="{
						star: article.has_star
					}"
				></i>
			</span>
			<span class="icon-group"><i class="iconfont iconfenxiang"></i></span>
		</div>
		<!-- 形态2. 文本域，用户课室输入 -->
		<div class="type2" v-show="isShow">
			<!-- Vant 也有组件 -->
			<textarea
				class="textarea"
				placeholder="回复: @火星网友"
				v-focus
				v-model.trim="content"
			></textarea>
			<div class="btn-group">
				<span class="btn" @click="isShow = false">取消</span>
				<span class="btn" @click="printFn">发送</span>
			</div>
		</div>
	</div>
</template>

<script>
import { editStarAPI, printCommentAPI } from '../api/user.js';
export default {
	props: {
		article: Object,
		replyObj: Object
	},
	data() {
		return {
			isShow: false,
			content: ''
		};
	},
	watch: {
		replyObj: {
			deep: true,
			handler(val) {
				console.log(val);
				if (!val) return;
				this.content = `@${val.user.nickname}:`;
			}
		},
		// 为空时清空回复对象
		content: {
			handler(val) {
				if (val === '') this.$emit('reset');
			}
		}
	},
	methods: {
		// 收藏
		async starFn() {
			const { message } = (await editStarAPI(this.article.id)).data;
			// console.log(message);
			if (message === '取消成功') this.article.has_star = false;
			else this.article.has_star = true;
			this.$toast(message);
		},
		// 发布评论
		async printFn() {
			if (this.content === '') return this.$toast('请输入评论');

			const parent_id = this.replyObj && this.replyObj.id;

			const { message } = (await printCommentAPI(this.article.id, {
				content: this.content,
				parent_id
			})).data;
			// console.log(message);
			this.$toast.success(message);

			// 更新页面
			this.content = '';
			this.isShow = false;
			this.$emit('reload');
		}
	}
};
</script>

<style lang="less" scoped>
.comment {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f2f2f2;
}
.star {
	color: red;
}
.type1 {
	display: flex;
	height: 50px;
	align-items: center;
	padding: 0 10px;
	input {
		flex: 1;
		height: 30px;
		border-radius: 15px;
		background-color: #d7d7d7;
		border: none;
		padding: 0 10px;
		margin: 10px;
	}
	.icon-group {
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		.iconfont {
			font-size: 20px;
		}
		em {
			background-color: red;
			color: #fff;
			position: absolute;
			right: 0px;
			top: 0;
			font-size: 12px;
			border-radius: 15px;
			padding: 0 2px;
		}
	}
}
.type2 {
	display: flex;
	padding: 10px;
	.textarea {
		height: 80px;
		background-color: #d7d7d7;
		border-radius: 5px;
		flex: 1;
		padding: 5px;
	}

	.btn-group {
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		.btn {
			width: 60px;
			height: 25px;
			background-color: red;
			color: #fff;
			border-radius: 100px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
